<!DOCTYPE html>
<html>
<head>
	<title>css-viewport</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
		* {
  		  box-sizing: border-box;
		}

		.header{
			border: 1px solid red;
			padding: 15px;
			text-align: center;
			font-size: 20px;
		}

		.menu
		{
			width: 25%;
		    border: 1px solid red;
			padding:15px;
			float: left;
			background-color: white;
		}

		.menu ul li{
			text-decoration: none;
			list-style-type: none;
			padding: 10px;
			cursor: pointer;
		}

		.menu li a{
			text-decoration: none;
		}

		.menu ul li:hover{
			background-color: pink;
		}

		.main{
			width: 75%;
			padding: 15px;
			float: left;
			border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="header">
		Chania
	</div>

	<div class="menu">
		<ul>
			<li><a href="#">The Flight</a></li>
			<li>The City</li>
			<li>The Island</li>
			<li>The Food</li>
		</ul>
	</div>
	
	<div class="main">
		<h1>The City</h1>
			<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
			<p>Resize the browser window to see how the content respond to the resizing.</p>
	</div>
</body>
</html>